<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <!-- Summernote CSS  -->
        <link rel="stylesheet" type="text/css" href="${rootPath}/js/plugins/summernote/summernote.css">
        <link rel="stylesheet" type="text/css" href="${rootPath}/js/plugins/summernote/summernote-bs3.css">
        <%@include file="common/head.jspf" %>
    </head>

    <body class="messages-page editors-page sb-l-o sb-r-c" data-menu="" data-list="#li_cms">

        <!-- 主体内容开始 -->
        <div id="main">

            <!--侧边导航栏-->
            <%@include file="common/sidebar.jspf" %>

            <!-- Start: Content-Wrapper -->
            <section id="content_wrapper">

                <!-- 顶部导航 -->
                <header id="topbar">
                    <div class="topbar-left">
                        <ol class="breadcrumb">
                            <li class="crumb-active">
                                <span>软擎科技</span>
                            </li>
                            <li class="crumb-icon">
                                <a href="dashboard"><span class="glyphicon glyphicon-home"></span></a>
                            </li>
                            <!-- 当前页 -->
                            <li class="crumb-trail">内容管理</li>
                        </ol>
                    </div>
                    <div class="topbar-right">
                        <!-- 登录信息 -->
                        <%@include file="common/session.jspf" %>
                    </div>
                </header>
                <!-- 顶部导航结束 -->

                <!-- 页面内容开始 -->
                <section id="content" class="table-layout">
                    <aside class="tray tray-left pn va-t tray250" data-tray-height="match">
                        <div class="p20">
                            <h4 class="mt5 mb20"> 内容管理 - <span class="fs14 fw400 text-muted"> Content Management</span></h4>
                            <ul class="list-unstyled list-spacing-10 mb10 pl5">
                                <li>
                                    <i class="fa fa-exclamation-circle text-system fa-lg pr10"></i>
                                    分栏目添加/修改平台文章
                                </li>
                                <li>
                                    <i class="fa fa-exclamation-circle text-system fa-lg pr10"></i>
                                    可选择系统预置或自定义栏目
                                </li>
                            </ul>
                        </div>
                        <div class="tab-block mb10" id="addCmsCnannelTab">
                            <ul class="nav nav-tabs nav-justified">
                                <li class="active">
                                    <a href="#tab_build_in" data-toggle="tab">系统预置</a>
                                </li>
                                <li>
                                    <a href="#tab_custom" data-toggle="tab">自定义</a>
                                </li>
                            </ul>
                            <div class="tab-content ph15 pv10">
                                <div id="tab_build_in" class="tab-pane active">
                                    <div class="admin-form">
                                        <form class="" role="form">
                                            <div class="section mb10">
                                                <label class="field select">
                                                    <select id="build_in_channel" name="build_in_channel"></select>
                                                    <i class="arrow"></i>
                                                </label>
                                            </div>
                                            <div class="form-group mb10">
                                                <div class="col-xs-12 pn">
                                                    <button id="add_system_channel" type="button" class="btn btn-primary btn-block fw600"><i class="fa fa-plus mr5"></i>添加栏目</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div id="tab_custom" class="tab-pane">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group mb10">
                                            <div class="col-xs-12">
                                                <input type="text" name="name" id="name" class="form-control" placeholder="栏目中文名称" />
                                            </div>
                                        </div>
                                        <div class="form-group mb10">
                                            <div class="col-xs-12">
                                                <input type="text" name="key" id="key" class="form-control" placeholder="栏目英文名称" />
                                            </div>
                                        </div>
                                        <div class="form-group mb10">
                                            <div class="col-xs-12">
                                                <button id="add_custom_channel" type="button" class="btn btn-primary btn-block fw600"><i class="fa fa-plus mr5"></i>添加栏目</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="mb10 shide" id="editChannelTab">
                            <hr class="mn br-light">
                            <div class="p10 fw600 text-center">修改栏目</div>
                            <hr class="mn br-light">
                            <div class="ph15 pv10">
                                <form class="form-horizontal" role="form">
                                    <div class="form-group mb10">
                                        <div class="col-xs-12">
                                            <input type="text" name="ch_name" id="ch_name" class="form-control" placeholder="栏目名称" />
                                        </div>
                                    </div>
                                    <div class="form-group mb10">
                                        <div class="col-xs-12">
                                            <input type="text" name="ch_key" id="ch_key" class="form-control" placeholder="显示名称" />
                                        </div>
                                    </div>
                                    <div class="form-group mb10">
                                        <div class="col-xs-8">
                                            <button id="edit_channel_btn" type="button" class="btn btn-primary btn-block fw600"><i class="fa fa-edit mr5"></i>修改栏目</button>
                                        </div>
                                        <div class="col-xs-4 pln">
                                            <button id="cancel_channel_edit_btn" type="button" class="btn btn-default btn-block fw600">取消</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <hr class="mn br-light">
                        </div>

                        <div class="p10">
                            <!-- menu links -->
                            <h4 class="ph10 mt10 mb5"> 栏目列表 </h4>
                            <div class="fs16 text-muted mt25 text-center" id="noChannel"><i class="fa fa-desktop mr10"></i>尚未添加栏目</div>
                            <ul class="nav nav-messages p5 fs14" role="menu" id="channelContainer"></ul>
                        </div>
                    </aside>

                    <div class="tray tray-center pn va-t bg-light">

                        <!--文章列表-->
                        <div id="articles">
                            <div class="pv10 pl15 bg-white pr10 br-b">
                                <div class="row table-layout">
                                    <div class="col-xs-12 pn">
                                        <div class="btn-group pull-left hidden">
                                            <button type="button" class="btn btn-default light"><i class="fa fa-refresh"></i></button>
                                        </div>
                                        <div class="pull-left lh40 fs15 mn"><i class="fa fa-dot-circle-o mr5 text-primary"></i><span id="channelKey"></span></div>
                                        <div class="pull-right prn">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default light" id="addArticleLink"><i class="fa fa-plus mr5"></i>添加文章</button>
                                            </div>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default light"><i class="fa fa-chevron-left"></i></button>
                                                <button type="button" class="btn btn-default light"><i class="fa fa-chevron-right"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- message listings table -->
                            <table id="cmsItemTable" class="table admin-form theme-warning tc-checkbox-1">
                                <thead>
                                    <tr class="">
                                        <th class="hidden-xs"></th>
                                        <th>名称/标题</th>
                                        <th>发布日期</th>
                                        <th>创建日期</th>
                                        <th>URL地址</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="itemContainer">
                                    <tr>
                                        <td colspan="6" class="text-center text-muted-light pv50 fs15" id="itemTd">
                                            <i class="mr10 fa fa-spin fa-spinner"></i>加载中 ...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


                        <div id="newArticle" class="p10 shide">
                            <form class="form-horizontal admin-form mb10 mt10" role="form" id="articleForm">
                                <div class="form-group mbn">
                                    <input type="hidden" name="id" id="id" value="">
                                    <input type="hidden" name="parent" value="">
                                    <label class="col-md-3 col-lg-2 control-label mb10" for="daterangepicker1"><i class="fa fa-tag mr5"></i>文章标题</label>
                                    <div class="col-md-8 col-lg-3 mb10">
                                        <input type="text" class="form-control pull-right" name="title" id="title">
                                    </div>
                                    <label class="col-md-3 col-lg-2 control-label mb10" for="daterangepicker1"><i class="fa fa-dot-circle-o mr5"></i>所属栏目</label>
                                    <div class="col-md-8 col-lg-3 section mb10">
                                        <label class="field select">
                                            <select id="article_channels" name="channelId"></select>
                                            <i class="arrow"></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group mbn">
                                    <label class="col-md-3 col-lg-2 control-label mb10" for="publishDate"><i class="fa fa-clock-o mr5"></i>发布日期</label>
                                    <div class="col-md-8 col-lg-3 mb10">
                                        <div class="section mbn">
                                            <label for="datepicker1" class="field prepend-icon">
                                                <input type="text" id="publishDate" name="publishDate" class="gui-input" placeholder="Datepicker Popup">
                                                <label class="field-icon"><i class="fa fa-calendar-o"></i>
                                                </label>
                                            </label>
                                        </div>
                                    </div>
                                    <label class="col-md-3 col-lg-2 control-label mb10" for="url"><i class="fa fa-link mr5"></i>文章链接</label>
                                    <div class="col-md-8 col-lg-3 mb10">
                                        <input type="text" class="form-control pull-right" name="url" id="url">
                                    </div>
                                </div>
                            </form>
                            <div class="panel-body pn of-h bg-white">
                                <div class="summernote" id="editor"></div>
                            </div>
                            <div class="mt15 row">
                                <div class="col-lg-3"></div> 
                                <div class="col-lg-3 col-xs-6 col-md-6">
                                    <button type="button" class="btn btn-primary btn-block" id="save_article"><i class="fa fa-check mr10"></i>保存文章</button>
                                </div>
                                <div class="col-lg-3 col-xs-6 col-md-6 ptn">
                                    <button type="button" class="btn btn-default light btn-block" id="cancel_add_article">取消保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- 页面内容结束 -->
            </section>
        </div>
        <!-- 主体内容结束 -->

        <script type="text/x-tmpl-mustache" id="cmsItemTemplate">
            {{#result}}
            <tr class="message-read">
                <td class="hidden-xs">
                    <span class="pull-center"><span class="glyphicons glyphicons-tag text-ddd"></span></span>
                </td>
                <td><a href="javascript:;" class="edit-item-link" data-id="{{id}}">{{title}}</a></td>
                <td>{{publish}}</td>
                <td>{{createTime}}</td>
                <td>{{url}}</td>
                <td class="text-right">
                    <div class="btn-group mr10">
                        <button class="btn btn-default light btn-sm text-muted edit-item-link" data-id="{{id}}"><i class="fa fa-pencil"></i></button>
                        <button class="btn btn-default light btn-sm text-muted" data-id="{{id}}"><span class="glyphicons glyphicons-up_arrow"></span></button>
                        <button class="btn btn-default light btn-sm text-muted delete-item-link" data-id="{{id}}"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
            {{/result}}
        </script>
        <script type="text/x-tmpl-mustache" id="channelListTemplate">
            {{#result}}
            <li data-id="{{id}}" data-key="{{channelKey}}" data-name="{{name}}">
                <a href="javascript:;" class="fw600 p10">
                    <span class="fa fa-dot-circle-o mr5"></span> {{name}}
                    <div class="btn-group pull-right">
                        <button class="btn btn-default light btn-xs edit-channel-link" role="buton" title="修改"><i class="fa fa-pencil text-muted"></i></button>
                        <button data-url="cms/deleteChannel/{{id}}" class="btn btn-default light btn-xs delete-channel-link" role="button" title="删除"><i class="fa fa-trash text-muted"></i></button>
                    </div>
                </a>
            </li>
            {{/result}}
        </script>
        <script type="text/x-tmpl-mustache" id="loadingArticle">
            <tr>
                <td colspan="6" class="text-center text-muted-light pv50 fs15" id="itemTd">
                    <i class="mr10 fa fa-spin fa-spinner"></i>加载中 ...
                </td>
            </tr>
        </script>


        <!-- 公共函数 -->
        <%@include file="common/scripts.jspf" %>
        <!-- Summernote JS -->
        <script type="text/javascript" src="${rootPath}/js/plugins/summernote/summernote.min.js"></script>
        <script type="text/javascript" src="${rootPath}/js/plugins/summernote/lang.js"></script>
        <script src="${rootPath}/js/admin-tools/admin-forms/js/jquery-ui-timepicker.min.js"></script>
        <script src="${rootPath}/js/admin-tools/admin-forms/js/lang/jquery-ui-timepicker-zh.js"></script>
        <script src="${rootPath}/js/admin-tools/admin-forms/js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
        <script type="text/javascript" src="${rootPath}/js/pages/cms.js"></script>
    </body>
</html>
